<template>
  <div class="userHistory">
    <!-- <userCell title="收藏/历史"></useruCell> -->
    <mynav title="收藏/历史" :path="path"></mynav>
    <div class="collect">
      <van-tabs v-model="active" animated class="tab">
        <van-tab title="我的收藏">
          <!-- 参数:finished="finished"  @load="onLoad"  finished-text="没有更多了"   -->
          <van-list>
            <div class="content">
              <div class="c1" v-for="(item, index) in collectList" :key="index">
                <div class="top">
                  <div class="left">
                    <h3>
                      {{ item.title }}
                    </h3>
                    <span
                      >{{ item.aut_name }}
                      <i>{{ item.pubdate | filterTime }}</i></span
                    >
                  </div>

                  <div class="right">
                    <img
                      v-if="item.cover.images"
                      :src="item.cover.images"
                      alt=""
                    />
                    <img v-else src="@/assets/logo.png" alt="" />
                  </div>
                </div>
                <div class="down">
                  <div class="c1">
                    <i class="iconfont">&#xe65b;</i> <span>评论</span>
                  </div>
                  <div class="c1 active">
                    <i class="iconfont">&#xe639;</i> <span>点赞</span>
                  </div>
                  <div class="c1">
                    <i class="iconfont">&#xe63c;</i> <span>收藏</span>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </van-tab>
        <van-tab title="我的历史">我的历史</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import mynav from '@/components/mynav.vue'
import { appArticleCollections } from '@/api/user.js'
export default {
  components: {
    mynav
  },
  data () {
    return {
      path: '/home/user',
      loading: false,
      active: '1',
      collectList: []
    }
  },
  async created () {
    const res = await appArticleCollections()
    this.collectList = res.data.results
    window.console.log(res.data.results)
  }
}
</script>

<style lang="less">
.userHistory {
  .collect {
    .content {
      // border-bottom: 1px solid #ccc;
      border-top: 5px solid #f7f4f5;
      .c1 {
        padding-top: 5px;
        .top {
          padding: 11px 15px;
          display: flex;
          justify-content: center;
          align-items: center;
          .left {
            flex: 1;
            padding-right: 10px;
            h3 {
              font-family: MicrosoftYaHei;
              font-size: 14px;
              line-height: 20px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 1px;
              color: #3a3a3a;
            }
            span {
              font-family: MicrosoftYaHei;
              font-size: 12px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 1px;
              color: #b4b4b4;
            }
          }

          .right {
            // border: 1px solid #ccc;
            img {
              width: 116px;
              height: 73px;
            }
          }
        }
        .down {
          border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          padding: 0 15px;
          height: 47px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .c1 {
            align-items: center;
            line-height: 47px;
            .iconfont {
              font-size: 22px;
            }
            span {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
  .active {
    padding-left: 37px;
    padding-right: 37px;
    height: 47px;
    border-right: 2px solid #ccc;
    border-left: 2px solid #ccc;
  }
}
</style>
